/* eslint-disable react/jsx-pascal-case */
import React ,{useState} from 'react'
import {useSelector,useDispatch} from "react-redux"
import {RootState,RootDispatch} from "../../utils/index"
import { Tabs } from 'react-vant'
import My_content from "../../components/My_content"
import {check_children_Data} from "../../api/index"

type Props = {}

const Comprehensive = (props: Props) => {
  const dispatch:RootDispatch = useDispatch()
  const [active,setActive] = useState(0)
  const {data,children_data} = useSelector((state:RootState)=>state)
  return (
    <div className='Comprehensive'>
       <Tabs active={active}  defaultActive={0} onChange={(e)=>{
        setActive(e as number)
        dispatch(check_children_Data(e as number))
       }}>
          {data&&data.map((item,index) => (
            <Tabs.TabPane key={index} title={`${item.title}`}>
                <My_content data_content={children_data} active={active}/>
            </Tabs.TabPane>
          ))}
      </Tabs>
    </div>
  )
}

export default Comprehensive